<template>
	<view class="container" v-if='showPage'>
		<!-- 订单状态和收货人的信息 -->
		<view class="order_status">
			<view class="status">
				<text
					class="status_s">{{detail_info.order_status == 0?'待付款' : detail_info.order_status == 1? '已支付': ( detail_info.order_status == 2? (item.is_dividend == 1?'待自提':'待收货') : detail_info.order_status == 3? '已完成': '')}}
				</text>
				<text v-if="detail_info.order_status == 0">订单已提交,支付完成立即发货</text>
				<text v-if="detail_info.order_status == 1">已付款等待商家发货</text>
				<text v-if="detail_info.order_status == 2">请尽快取走你的包裹~</text>
				<text v-if="detail_info.order_status == 3">订单已完成</text>
			</view>
			<view class="status_img">
				<image v-if="detail_info.order_status == 0"
					src="../img/daizhifu.png"
					mode=""></image>
				<image v-if="detail_info.order_status == 1"
					src="../img/daifukuan.png"
					mode=""></image>
				<image v-if="detail_info.order_status == 2"
					src="../img/daishouhuo.png"
					mode=""></image>
				<image v-if="detail_info.order_status == 3"
					src="../img/yiwancheng.png"
					mode=""></image>
			</view>
		</view>
		<!-- 收货人信息 -->
		<view class="delivery_info">
			<text class="tit">收货人信息</text>
			<view class="address">
				{{detail_info.detail}}{{detail_info.address}}
			</view>
			<view class="info">
				<text>{{detail_info.name}}</text>
				<text class="mobile">{{detail_info.phone}}</text>
			</view>
			<image class="bot_pick"
				src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/a63601fe6f6dac40825ea04a71d7403383a0ec04.png"
				mode=""></image>
		</view>
		<!-- 商品信息 -->
		<view class="shop-ino-wrap">
			<view class="shop_info" v-for="(item,index) in detail_info.order_item" :key="index">
				<view class="info">
					<image :src="item.g_pic" mode=""></image>
				</view>
				<view class="info_content">
					<text class="tit">{{item.goodname}}</text>
					<view class="price">
						<text>¥<text class="money">{{ item.price}}</text> </text>
						<text>x{{item.nums}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="msg">
			<view class="msg_s">
				<text>实付金额<text style="color: #cecece;font-size: 24rpx;margin-left: 10rpx; ">(含运费：{{detail_info.fee}})</text></text>
				<view class="msg_s-right num">
					￥{{detail_info.final_money}}
				</view>
			</view>
			<view class="msg_s">
				<text>订单编号</text>
				<view class="msg_s-right">
					{{detail_info.order_sn}} | <view class="copy" @tap="paste(detail_info.order_sn)">
						复制
					</view>
				</view>
			</view>
			<view class="msg_s" v-if="detail_info.order_status != 0">
				<text>支付方式</text>
				<view class="msg_s-right">
					微信支付
				</view>
			</view>
			<view class="msg_s">
				<text>下单时间</text>
				<view class="msg_s-right">
					{{detail_info.add_time}}
				</view>
			</view>
			<template v-if="detail_info.order_status == 2 || detail_info.order_status == 3">
				<view class="msg_s">
					<text>快递公司</text>
					<view class="msg_s-right">
						{{detail_info.express}}
					</view>
				</view>
				<view class="msg_s">
					<text>订单编号</text>
					<view class="msg_s-right">
						{{detail_info.delivery_no}} | <view class="copy" @tap="paste(detail_info.delivery_no)">
							复制
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 订单按钮 -->
		<view class="order-btn-wrap" v-if="detail_info.order_status != 0">
			<view class="order_btn">
				<!-- <view class="btn" @tap.stop='logistics_nav(detail_info.order_sn)'
					v-if="detail_info.order_status == 2 || detail_info.order_status == 3">
					查看物流
				</view> -->
				<view class="btn btns" @click="comfire_take()" v-if="detail_info.order_status == 2">
					{{item.is_dividend == 1?'确认自提':'确认收货'}}
				</view>
				<view class="btn btns" v-if="detail_info.order_status == 1">
					等待发货
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				detail_id: '',
				detail_info: '',
				self_pickup_address: '',
				userInfo: '',
				puah_name: '',
				puah_mobile: '',
				order_id: '',
				puah_status: false,
				showPage:false,
			};
		},
		onLoad(opt) {
			this.detail_id = opt.order_sn;
			uni.showLoading({
				title:'加载中...',
				mask:true,
			})
			this.order_details()
			this.getUserInfo()
		},
		methods: {
			// 修改自提人的姓名和电话
			edit_from() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.savePuahInfo,
					data: {
						order_id: that.order_id,
						puah_name: that.puah_name,
						puah_mobile: that.puah_mobile
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
					}
				}).catch(err => {

				})
			},

			/* 获取用户信息 */
			getUserInfo() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						let userInfo = res.data.uInfo;
						that.userInfo = userInfo;
					}
				}).catch(err => {

				})
			},

			ditu(address) {
				let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
				let x = address.longitude - 0.0065;
				let y = address.latitude - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				let lngs = z * Math.cos(theta);
				let lats = z * Math.sin(theta);
				uni.openLocation({
					longitude: Number(lngs),
					latitude: Number(lats),
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			logistics_nav(order_sn) {
				uni.navigateTo({
					url: '/pages/user/logistics/logistics?order_sn=' + order_sn
				})
			},
			// 复制
			paste(value) {
				uni.setClipboardData({
					data: value, // data的值为你要复制的内容
					success: res => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				});
			},
			// 订单详情
			order_details() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.orderDetail,
					data: {
						order_sn: that.detail_id
					},
					method: 'post'
				}).then(res => {
					that.showPage = true;
					if (res.code == 1) {
						that.detail_info = res.data
						that.order_id = that.detail_info.id
						that.puah_name = that.detail_info.puah_name
						that.puah_mobile = that.detail_info.puah_mobile
						that.self_pickup_address = that.detail_info.point[0]
					}
				}).catch(err => {

				})
			},
			// 确认收货
			comfire_take() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.comfireOrder,
					data: {
						order_sn: that.detail_id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.order_details()
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 200rpx;
	}

	.order_status {
		width: 100%;
		height: 278rpx;
		background: linear-gradient(90deg, #FF7040 0%, #EC1818 100%);
		padding: 0rpx 44rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.status {
			display: flex;
			flex-direction: column;
			color: #fff;
			padding-top: 36rpx;

			text {
				font-size: 28rpx;
			}

			.status_s {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}
		}

		.status_img {
			width: 128rpx;
			height: 128rpx;
			margin-top: 12rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.delivery_info {
		height: 372rpx;
		border-radius: 16rpx;
		padding: 60rpx 24rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: -100rpx 24rpx 0;
		position: relative;

		.tit {
			color: #323233;
			font-size: 32rpx;
		}

		.address {
			color: #323233;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				width: 90%;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.info {
			display: flex;
			align-items: center;
			color: #8C8C8C;
			font-size: 28rpx;

			.mobile {
				margin-left: 30rpx;
			}
		}

		.bot_pick {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 10rpx;
			width: 100%;
		}
	}

	.shop-ino-wrap {
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;

		.shop_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			.info {
				width: 176rpx;
				height: 176rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}

			.info_content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 176rpx;
				width: 68%;

				.tit {
					color: #000000;
					font-size: 28rpx;
				}

				.price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						color: #323233;
						font-size: 28rpx;

						.money {
							color: #323233;
							font-size: 32rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}


	

	.msg {
		margin: 24rpx 24rpx 0;
		background: #fff;
		box-sizing: border-box;
		border-radius: 16rpx;
		.msg_s {
			height: 100rpx;
			padding: 0 28rpx;
			border-bottom: 2rpx solid #eee;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:last-of-type{
				border-bottom: 0;
			}
			.msg_s-right {
				color: #CCCCCC;
				font-size: 24rpx;
				display: flex;
			}

			.num {
				color: $dis-font-color;
			}

			.copy {
				font-size: 24rpx;
				color:#333;
				padding-left:10rpx;
			}
		}
	}
	.order-btn-wrap{
		width: 100%;
		height: 116rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left:0;
		bottom:0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index:222;
	}

	.order_btn {
		width: 100%;
		height: 100%;
		padding: 0 34rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.btn {
			height: 76rpx;
			line-height: 76rpx;
			padding: 0rpx 40rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			border: 2rpx solid #D4D4D4;
			margin-right: 20rpx;
			border-radius: 38rpx;
		}
		.btns {
			background: linear-gradient(89deg, #FF6A40 0%, #FF5740 100%);
			border: 0;
			color: #fff;
		}
	}

	.pay {
		display: flex;
		flex-direction: column;
		padding: 16rpx 24rpx 26rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 4rpx;
		width: 92%;
		margin: 30rpx auto 0;
	}
</style>